<template>
  <div class="one">
    <a-upload-dragger
      v-model:fileList="fileList"
      name="pic"
      :multiple="false"
      :showUploadList="false"
      listType="picture"
      action="/upload/pic"
      :customRequest='customRequest'
      @change="handleChange"
    >
      <p class="ant-upload-text">单击或拖动图片到此区域</p>
      <p>支持.png和.jpg图片(推荐1MB以下)</p>
    </a-upload-dragger>

    <div class="show" v-if="outputUrl">
      <a class="download" :download="outputName" :href="outputUrl">下载</a>
      <div class="imgCompared">
        <!-- 图片对比 -->
        <div class="header">图片对比</div>
        <img-comparison-slider ref="imgComparisonSlider">
          <!-- eslint-disable -->
          <div class="c-before" slot="before" style="width: 100%" >
            <div class="tips-old">压缩前{{inputSize}}KB</div>
            <img :src="inputUrl" />
          </div>
          <div class="c-after" slot="after" style="width: 100%">
            <div class="tips-new">压缩后{{outputSize}}KB</div>
            <img :src="outputUrl" />
          </div>
          <!-- eslint-enable -->
        </img-comparison-slider>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import Compressor from 'compressorjs';
import { message } from 'ant-design-vue';
import common from 'static/js/common.js'

// const worker = new Worker('/js/worker.js')

export default {
  name:'One',
  setup(props) {
    // console.log(props)
    let outputSize = ref('')
    let outputName = ref('')
    let outputUrl = ref('')
    let inputUrl = ref('')
    let inputSize = ref('')
    let info_copy = ref(null)

    const customRequest = (file)=>{
      //自定义上传功能,此处暂不需要上传，故用此覆盖默认上传功能
      // console.log(file)
      return false
    }

    watch(()=>props.quality,()=>{
      if(outputUrl.value){
        // handleChange(info_copy.value)
      }
    })

    const handleChange = info => {
      //开启线程
      const worker = new Worker('/js/worker.js',{ name : 'myWorker' })

      const loading = message.loading('处理中',0)
      info_copy.value = info
      let file = info.file.originFileObj
      // console.log(info,file)
      inputUrl.value = URL.createObjectURL(new Blob([file]))
      inputSize.value = (file.size/1024).toFixed(2)
      outputUrl.value = ""
      if(file.type.indexOf('png') != -1){
        //png压缩
        common.file2DataURL(file,(e)=>{
          common.file2uint8array(e,file.type).then(data=>{
            //判断后缀，是否为真实png图片
            if(common.checkPng(data)){
              let quality = (props.quality*100).toString()
              worker.postMessage({data,quality,name:file.name})
              worker.onmessage = function(e){
                let result = e.data.result
                let blobUrl = common.file2blob(result.data,file.name)
                outputUrl.value = blobUrl
                outputName.value = file.name
                outputSize.value = common.getSize(result.data.byteLength) 
                loading()
                worker.terminate(); //关闭线程
              }
            }else{
              loading()
              message.error('图片格式错误')
            }
          })
        })
      }else{
        //jpg压缩
        new Compressor(file, {
          quality: props.quality,
          convertSize:Infinity,
          success(result) {
            // console.log('result',result,URL.createObjectURL(new Blob([result])))
            outputUrl.value = URL.createObjectURL(new Blob([result]))
            outputName.value = result.name
            outputSize.value = (result.size/1024).toFixed(2)
            loading()
            worker.terminate(); //关闭线程
          }
        })
      }
    };

    return {
      handleChange,
      customRequest,
      fileList: ref([]),
      inputUrl,
      outputUrl,
      outputName,
      outputSize,
      inputSize
    };
  },
  props:{
    quality:{
      type:[Number,String],
    }
  },
  mounted () {
  },
  watch:{
    outputUrl(e){
      if(e){
        setTimeout(() => {
          this.$refs.imgComparisonSlider.afterElement.firstElementChild.style.zIndex = 1000
        }, 0);
      }
    }
  },
  components:{
  }
}
</script>

<style scoped>
  .one{
    background: #fff;
    padding: 24px;
  }
  .one .card{
    width: 100%;
    height: 170px;
    border: 1px solid rgba(0,0,0,.125);
    background-color: #f8f9fa;
  }
  .one .show{
    margin-top: 20px;
  }
  .one .show .imgCompared{
    position: relative;
    border: 1px solid rgba(0,0,0,.125);
  }
  .one .show .imgCompared .header{
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
  }
  .one .show .imgCompared .content{
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
  }
  .one .show .imgCompared .content .container{
    box-sizing: border-box;
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .one .show .imgCompared >>> .c-before,.one .show .imgCompared >>> .c-after{
    position: relative;
    min-width: 500px;
  }
  .one .show .imgCompared >>> .c-before .tips-old{
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 1000;
    font-size: 16px;
  }
  .one .show .download{
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    border-radius: 2px;
    margin-top: 20px;
    display: block;
    width: 80px;
    margin-bottom: 20px;
  }
  .one .show .imgCompared >>> .c-after .tips-new{
    position: absolute;
    left: 10px;
    top: 15px;
    z-index: 1000;
    font-size: 16px;
  }
</style>